<template>
	<view class="reg-wrap">
		<view class="task-type">
			<view v-for="(item, key) in typeList" :key="key" :class="[type == key ? 'active' : '']" @tap="changeType(key)">{{item}}</view>
		</view>
		<view>
			<view class="task-list-item" v-for="(item, key) in taskList" :key="key" :class="[choiceTaskList.indexOf(item) >= 0 ? 'active' : '']">
				{{item}}
				<icon type="success" :color="[choiceTaskList.indexOf(item) >= 0 ? '#5AD8F8' : '#e7e7e7']" @tap="choiceTask(item)"></icon>
			</view>
		</view>
		<view class="choice-task-title">自定义任务</view>
		<view class="task-list-item" :class="[choiceCustumTask ? 'active' : '']">
			<input type="text" value="" v-model="customTask" />
			<icon type="success" :color="[choiceCustumTask ? '#5AD8F8' : '#e7e7e7']" @tap="choiceCustumTaskHandle"></icon>
		</view>
		<button class="commit-btn" @tap="intoClass">进入班级</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [
				'内部',
				'外部'
			],
			taskList: [
				'每天和孩子拥抱一次',
				'每天读书10分钟',
				'每天和孩子拥抱两次'
			],
			type: 0,
			choiceTaskList: [],
			choiceCustumTask: false,
			customTask: ''
		}
	},
	watch:{
		customTask () {
			if (!this.customTask) {
				this.choiceCustumTask = false
			}
		}
	},
	methods: {
		// 进入班级
		intoClass() {
			if (!this.choiceTaskList.length) {
				uni.showToast({
					title: '请选择任务',
					icon: 'none',
					duration: 2000
				})
				return
			}
			console.log(this.type)
			console.log(this.choiceTaskList)
			if (this.choiceCustumTask) { // 有选择的自定义任务
				console.log(this.customTask)
			}

			// uni.navigateTo({
			// 	url: '/'
			// })
		},
		// 设置类型
		changeType(key) {
			this.type = key
		},
		// 选择任务
		choiceTask(item) {
			let itemIndex = this.choiceTaskList.indexOf(item)
			if (itemIndex < 0) {
				this.choiceTaskList.push(item)
			} else{
				this.choiceTaskList.splice(itemIndex, 1)
			}
		},
		// 选择自定义任务
		choiceCustumTaskHandle() {
			if(!this.customTask) {
				uni.showToast({
					title: '自定义任务不能为空',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.choiceCustumTask = !this.choiceCustumTask
		}
	},
}
</script>

<style lang="scss">
@import '@/static/css/base.scss';
page{font-size: 28upx; background-color: #F8FCFE}
.reg-wrap{padding: 40upx;}
.task-type{
	display: flex; justify-content: space-around; margin-bottom: 65upx;
	.active{color: $baseColor;}
}
.task-list-item{
	background-color: #fff; border: 1px solid #E5E5E5; height: 85upx; border-radius: 8upx; margin-bottom: 45upx; display: flex; align-items: center; padding: 0 15upx; color: #333; font-size: 28upx; justify-content: space-between;
	&.active{border-color: #5AD8F8; background-color: #E4F9FF; color: #50C0F0;}
}
.choice-task-title{
	color: $baseColor; margin: 60upx 0 40upx 0;
}
.commit-btn{background-color: $baseColor; color: #FFF;width: 670upx; height: 102upx; font-size: 32upx; line-height: 102upx;}
</style>
